<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天天生鲜-首页</title>
<link rel="short icon" href="images/copylogo.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/foot.css">
</head>

<body>
	<div id="login_info">
		<!-- 头部  -->
		<div class="header_con">
			<div class="header">
				<div class="welcome fl">欢迎来到天天生鲜</div>
				<div class="fr">
					<div class="login_info fl">
						<span v-if="nickName != ''">欢迎：<em>{{nickName}}</em></span>
						<!-- <em v-else>{{nickName}}</em>  -->
					</div>
					<div class="login_btn fl">
						<a v-if="nickName == ''" href="/user/login.html">登录</a> <span>
							| </span> <a target="_blabk" href="/user/register.html">注册</a>
					</div>
					<div class="user_link fl">
						<span> | </span><a href="user.html">用户中心</a> <span> | </span><a
							href="cart.html">我的购物车</a> <span> | </span><a
							href="../order/order.html">我的订单</a>
					</div>
				</div>
			</div>
		</div>

		<!-- 搜素框 -->
		<div class="search_bar clearfix">
			<a href="index.html" class="logo fl"><img src="images/logo.png"></a>
			<div class="search_con fl">
				<form>
					<input type="text" class="input_text fl" name="key_words"
						placeholder="搜索商品"> <input type="submit"
						class="input_btn fr" value="搜索">
				</form>
			</div>
			<div class="guest_cart fr">
				<a href="front/cart.html" class="cart_name fl">我的购物车</a>
				<div class="goods_count fl" id="show_count">{{goodsCount}}</div>
			</div>
		</div>
	</div>

	<!-- 商品分类 -->
	<div class="navbar_con">
		<div class="navbar">
			<h1 class="fl">全商品分类</h1>
			<ul class="navlist fl">
				<li><a href="">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">手机生鲜</a></li>
				<li class="interval">|</li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>

	<!-- 导航栏 -->
	<div class="center_con clearfix">
		<div class="subnav fl">
			<ul>
				<li><a href="#model01" class="fruit">新鲜水果</a></li>
				<li><a href="#model02" class="seafood">海鲜水产</a></li>
				<li><a href="#model03" class="meet">猪牛羊肉</a></li>
				<li><a href="#model04" class="egg">禽类蛋品</a></li>
				<li><a href="#model05" class="vegetables">新鲜蔬菜</a></li>
				<li><a href="#model06" class="ice">速冻食品</a></li>
			</ul>
		</div>
		<div class="slide fl">
			<ul class="slide_pics">
				<li><a href="" class=""><img src="images/slide.jpg"
						alt="幻灯片"></a></li>
				<li><a href="" class=""><img src="images/slide02.jpg"
						alt="幻灯片"></a></li>
				<li><a href="" class=""><img src="images/slide03.jpg"
						alt="幻灯片"></a></li>
				<li><a href="" class=""><img src="images/slide04.jpg"
						alt="幻灯片"></a></li>
			</ul>
			<div class="prev"></div>
			<div class="next"></div>
			<ul class="points"></ul>
		</div>
		<div class="adv fl">
			<a href=""><img src="images/adv01.jpg" alt="清凉一夏"></a> <a
				href=""><img src="images/adv02.jpg" alt="盛夏尝鲜"></a>
		</div>
	</div>
	<div id="goods_info">
		<!-- 商品展示 -->
		<div class="list_model" v-for="type in types">
			<div class="list_title clearfix">
				<h3 class="fl" id="model01">{{type.tname}}</h3>
				<div class="subtitle fl">
					<span>|</span> <a
						:href="'details.html#' + gd.gno + '&' + type.tname"
						v-for="gd in goods" v-if="gd.tno == type.tno" target="_blank">{{gd.gname}}</a>
				</div>
				<a :href=" 'goods.html#' + type.tno + '&' + type.tname "
					target="_blank" class="goods_more fr" id="fruit_more">查看更多</a>
			</div>

			<div class="goods_con clearfix">
				<div class="goods_banner fl">
					<img :src="'http://127.0.0.1:8080/fresh/' + type.pic">
				</div>
				<ul class="goods_list fl">
					<li v-for="gd in goods" v-if="gd.tno == type.tno">
						<h4>
							<a :href=" 'details.html#' + gd.gno + '&' + type.tname "
								target="_blank">{{gd.gname}}</a>
						</h4> <a :href=" 'details.html#' + gd.gno + '&' + type.tname "
						target="_blank"> <img
							:src="'http://127.0.0.1:8080/fresh/' + gd.pics"></a>
						<div class="prize">&yen; {{gd.price}}</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<footer>
		<!-- 版权所有 -->
		<div class="footer">
			<div class="foot_link">
				<a href="#">关于我们</a> <span> | </span> <a href="#">联系我们</a> <span>
					| </span> <a href="#">招聘广告</a> <span> | </span> <a href="#">友情链接</a>
			</div>
			<p>CopyRight &copy; 2019 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
			<p>电话：0734-8355998 湘ICP备16015987号-1</p>
		</div>
	</footer>

	<!--  注意引入顺序 -->
	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/axios.js"></script>
	<script src="js/qs.js"></script>
	<script src="js/check.js"></script>
	<script>
		let vm = new Vue({
			el: '#goods_info' ,
			data: {
				goods: {},
				types: {}
			},
			methods:{	//自定义一些方法
				
			},
			mounted: function(){	//数据挂载之前，自动执行的方法。类似jq的$(function(){});
				axios.get("goods/index",{params:{}}).then(result => {
					console.log(result);
					console.log(result.data);
					this.types = result.data.types;
					this.goods = result.data.goods;
				})
			}
		});
	</script>
</body>
</html>
